<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用Proxy实现观察者模式</title>
</head>
<body>
  <script>
    // 观察者模式(Observer mode) 指的是函数自动观察数据对象，一旦对象有变化，函数就自动执行。
    const queuedObservers = new Set(); // 先定义一个Set集合，所有观察者函数都放进这个集合
    const observe = fn => queuedObservers.add(fn); // 把 观察者函数加入到集合中
    const observable = obj => new Proxy(obj, {set}) // observable函数返回一个原始对象的Proxy代理，拦截赋值操作
    function set(target, key, value, recevier) {
      const result = Reflect.set(target, key, value, recevier)
      queuedObservers.forEach(observe => observe()) // 遍历集合，执行观察者函数
      return result
    }
    const person = observable({
      name: '张三',
      age: 20
    });
    function print() {
      console.log(`${person.name}, ${person.age}`)
    }
    observe(print);// 将print函数作为观察者函数放入集合中
    person.name = '李四' // 李四, 20
  </script>
</body>
</html>